<template>
    <div class="indexPage">
        <!-- 顶部导航 -->
        <div class="topVue flex_between align_center">
            <img src="../assets/menu_logo.png" class="logo">
            <div class="btn" @click="$jump(isLogin?'wChat':'login')">{{isLogin?"工作台":"登录"}}</div> 
        </div>
        <div style="height: 60px;"></div>

        <!-- 轮播图 -->
        <div class="swiperVue">
            <el-carousel trigger="click" height="400px">
                <el-carousel-item v-for="(item, index) in banners" :key="index">
                    <img :src="item" style="width: 100%; height: 100%;">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 业务痛点 -->
        <div class="section">
            <h2 class="text_center">业务痛点</h2>
            <p>客服人员流动大、知识培训周期长，导致企业内存在信息孤岛且沟通阻塞，面对繁多、复杂的客户问题，客服人员往往难以及时解决</p>
            <div class="liVue flex_between margin60">
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/1.png">
                    <h4>信息孤岛，重复劳动</h4>
                    <p>客户问题反复出现，缺少更新和处理记录，无法实现知识复用</p>
                </div>
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/2.png">
                    <h4>知识匮乏，解决难度大</h4>
                    <p>客服人员缺乏知识或不熟悉特定产品或服务，难以精准解决客户问题</p>
                </div>
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/3.png">
                    <h4>客服效率低，客户体验差</h4>
                    <p>客户问题繁多，客服人员沟通成本高，无法即时解决客户问题</p>
                </div>
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/4.png">
                    <h4>知识难共享，沟通困难</h4>
                    <p>公司内部知识缺少系统性分享，导致信息孤岛和闭环沟通失败</p>
                </div>
            </div>
            <div class="btn margin60" @click="$jump('contract')">立即咨询</div>
        </div>

        <!-- 在线客服系统，多功能亮点 -->
        <div class="section section_online">
            <h2 class="text_center">在线客服系统，多功能亮点</h2>
            <div class="liVue flex_between margin60">
                <div class="li flex_column align_center ">
                    <img src="../assets/index/5.png" style="width: 66px; height: 76px;">
                    <h4>即时聊天快速接入</h4>
                    <p>支持聊天链接/网站插件等多方式接入，实时对话，简单方便</p>
                </div>
                <div class="li flex_column align_center">
                    <img src="../assets/index/6.png" style="width: 84px; height: 76px;">
                    <h4>手机/PC消息同步</h4>
                    <p>支持手机/PC同时登陆，访客无需安装插件即可发起咨询，客服随时随地接收消息</p>
                </div>
                <div class="li flex_column align_center">
                    <img src="../assets/index/7.png" style="width: 71px; height: 76px;">
                    <h4>多渠道可使用</h4>
                    <p>支持微信/飞书/钉钉/加密猫等渠道</p>
                </div>
                <div class="li flex_column align_center">
                    <img src="../assets/index/8.png" style="width: 87px; height: 76px;">
                    <h4>智能AI机器人</h4>
                    <p>辅助人工，强大自主学习能力&知识库批量操作，实现24小时秒级响应</p>
                </div>
                <div class="li flex_column align_center">
                    <img src="../assets/index/9.png" style="width: 95px; height: 76px;">
                    <h4>即时聊天快速接入</h4>
                    <p>支持客服分流/转接/插话/熟客识别等多重分配规则，精准营销。</p>
                </div>
            </div>
        </div>

        <!-- 使用流程 -->
        <div class="section section_step">
            <h2 class="text_center">使用流程</h2>
            <div class="liVue flex_between margin60">
                <div class="li flex_center align_center">
                    <h3>1. <span>开通AI私域客服</span></h3>
                </div>
                <div class="li flex_center align_center">
                    <h3>2. <span>绑定成为客服</span></h3>
                </div>
                <div class="li flex_center align_center">
                    <h3>3. <span>知识库上传问答资料,并接入AI</span></h3>
                </div>
                <div class="li flex_center align_center">
                    <h3>4. <span>智能回复客户问题</span></h3>
                </div>
            </div>
        </div>

        <!-- 智能客服 -->
        <div class="section section_ai">
            <h2 class="text_center">智能客服</h2>
            <p>有些事情想想难,其实只要行动起来,也就解决了</p>
            <div class="liVue flex flex_wrap margin60">
                <div class="li flex align_center">
                    <img src="../assets/index/10.png" style="width: 66px; height: 66px;">
                    <h4 style="padding-left: 10px;">微信私域客服</h4>
                </div>
                <div class="li flex align_center">
                    <img src="../assets/index/11.png" style="width: 66px; height: 66px;">
                    <h4 style="padding-left: 10px;">公众号私域客服</h4>
                </div>
                <div class="li flex align_center">
                    <img src="../assets/index/12.png" style="width: 66px; height: 66px;">
                    <h4 style="padding-left: 10px;">飞书私域客服</h4>
                </div>
                <div class="li flex align_center">
                    <img src="../assets/index/13.png" style="width: 66px; height: 66px;">
                    <h4 style="padding-left: 10px;">加密猫私域客服</h4>
                </div>
                <div class="li flex align_center">
                    <img src="../assets/index/14.png" style="width: 66px; height: 66px;">
                    <h4 style="padding-left: 10px;">钉钉私域客服</h4>
                </div>
            </div>
        </div>

        <div class="section section_advantige">
            <div class="liVue flex_between margin0">
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/15.png">
                    <h4>大语音模型</h4>
                </div>
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/16.png">
                    <h4>垂直行业语料库</h4>
                </div>
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/17.png">
                    <h4>企业人效提高</h4>
                </div>
                <div class="li flex_column align_center flex_between">
                    <img src="../assets/index/18.png">
                    <h4>完整串联</h4>
                </div>
            </div>
        </div>

        <div class="footVue">
            <img src="../assets/menu_logo.png" style="width: 102px; height: 26px; margin-bottom: 10px">
            <p>近年来，随着深度学习技术的飞速发展，大规模人工智能模型（简称大模型）在多个领域展现 出强大的能力。</p>
            <p>大模型通常指参数数量巨大、能够处理海量数据、具备强大江乏化能力的深度学习模型。</p>
            <p>本项目旨在研发和优化一系列大模型，并探索其在不同行业的应用场景。</p>
            <div class="copyLink text_center">Copyright ©  AIET 京ICP备12013432号-1   京公网安备  11010502037938号</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            banners: ["https://zsd.hrkj.fit:9012/aiet/si-yu-ke-fu/%E5%A4%B4%E9%83%A8-banner.png"],
            isLogin: false
        }
    },
    created(){
        let token = window.localStorage.getItem("ai_token") || ""
        this.isLogin = token ? true : false
    },
}
</script>

<style lang="less" scoped>
.indexPage {
    width: 100%;
    height: 100vh;
    overflow: scroll;
}
.indexPage::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}
.topVue {
    width: 100vw;
    height: 60px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 99;
    padding: 0 20px;
    .logo {
        width: 120px;
        height: 33px;
        cursor: pointer;
    }
    .btn {
        width: 100px;
        height: 40px;
        background: #0147fd;
        border-radius: 5px;
        line-height: 40px;
        text-align: center;
        color: #fff;
    }
}   

.swiperVue {
    width: 100%;
    height: 400px;
}

.section {
    width: 100%;
    padding: 70px 50px;
    h2 {
        color: #101010;
        font-size: 30px;
    }
    p {
        color: #101010;
        font-size: 16px; 
        text-align: center;
        padding-top: 30px;
    }
    .liVue {
        width: 100%;
        .li {
            width: 24%;
            min-height: 250px;
            background: #FFFFFF;
			box-shadow: 0px 8px 16px 0px rgba(187,187,187,0.5);
            border-radius: 6px;
            padding: 40px 30px 50px;
            cursor: pointer;
            img {
                width: 40px;
                height: 50px;
            }
            h4 {
                font-size: 20px;
                color: #101010;
            }
            p {
                color: #999;
                padding-top: 0;
                line-height: 1.4;
            }
        }
        .li:hover {
            transform: scale(1.05)
        }
    }
    .btn {
        width: 250px;
        height: 42px;
        border-radius: 5px;
        background: #0147fd;
        line-height: 42px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
    .btn:hover {
        background: linear-gradient(90deg,#1f1ce0,#ff5e62);
    }
}

.section_online {
    background: url("../assets/service-bg.png") no-repeat;
    background-size: 100% 100%;
    .liVue {
        width: 100%;
        .li {
            width: 19%;
            min-height: 280px;
            h4 {
                padding-top: 20px;
            }
            p {
                color: #999;
                padding-top: 20px;
                line-height: 1.4;
            }
        }
    } 
}

.section_step {
    .liVue {
        width: 100%;
        .li {
            min-height: 80px;
            padding: 0;
            text-align: center;
            h3 {
                font-size: 18px;
                color: #0147fd;
                span {
                    font-size: 18px; 
                }
            }
        }
    } 
}

.section_ai {
    background: url("../assets/service-bg1.png") no-repeat;
    background-size: 100% 100%;
    .liVue {
        width: 100%;
        .li {
            width: 32%;
            min-height: 150px;
            margin-bottom: 2%;
            margin-right: 2%;
        }
        .li:nth-child(3) {
            margin-right: 0;
        }
    }
}

.section_advantige {
    width: 100%;
    .liVue {
        height: 170px;
        .li {
            width: 24%;
            min-height: 170px;
            padding: 40px;
        }
    }
}

.footVue {
    width: 100%;
    background: #FFFFFF;
	box-shadow: 0px 8px 16px 8px rgba(187,187,187,0.5);
    padding: 50px 50px 0;
    p {
        color: #333;
        padding-top: 20px;
    }
    .copyLink {
        width: 100%;
        height: 50px;
        margin-top: 50px;
        border-top: 1px solid #f5f5f5;
        line-height: 50px;
        color: #333;
    }
}
</style>